<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="类型" prop="type" required>
        <el-select v-model="form.type" placeholder="请选择类型" style="width: 200px">
          <el-option
            v-for="item in [
              { value: 0, label: '菜单-页面' },
              { value: 1, label: '功能-权限' }
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="form.type==0?'上级菜单':'所属菜单'" prop="parent_id" :required="form.type==1">
        <SelectedTree
          clearable
          :tree-data="category_list"
          :default-props="{ children: 'children', label: 'label' }"
          :value="form.parent_name"
          :default-expand-all="true"
          @node-click="chooseTree"
          @clear="clearTree"

        />
      </el-form-item>
      <el-form-item :label="form.type==0?'菜单名称':'功能权限名称'" prop="title" required>
        <el-input v-model="form.title" placeholder="请输名称"/>
        <span class="bs-red">比如: 商品列表</span>
      </el-form-item>

      <el-form-item label="路由地址" prop="path" required>
        <el-input v-model="form.path" placeholder="请输入路由地址"/>
         <span class="bs-red">比如: /goods/list，定义在前端route/index.js中的名称</span>
      </el-form-item>
      <div v-if="form.type==0">
        <el-form-item label="路由名称" prop="name" required>
          <el-input v-model="form.name" placeholder="请输入路由名称"/>
        </el-form-item>
        <el-form-item label="组件名称" prop="component">
          <el-input v-model="form.component" placeholder="请输入组件名称"/>
        </el-form-item>
        <el-form-item label="重定向地址" prop="redirect">
          <el-input v-model="form.redirect" placeholder="请输入重定向地址"/>
        </el-form-item>
        <el-form-item label="是否隐藏" prop="hidden">
          <el-switch
            v-model="form.hidden"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>


        <el-form-item label="图标" prop="icon">
          <el-input v-model="form.icon" placeholder="图片"/>
          <span class="el-form-item__info"
          >可以用element UI的图标class列名称，也可以用svg图标（自己放置在对应的src/icons/svg下面）</span>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.sort" type="number"/>
        </el-form-item>

      </div>

      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/menu'
import ImageUpload from '@/components/UploadFile/image.vue'
import SelectedTree from '@/components/tools/selectedTree.vue'

export default {
  components: {
    ImageUpload, SelectedTree
  },
  data() {
    return {
      category_list: [],
      form: {
        type: 0,
        id: 0,
        parent_id: 0,
        path: '',
        name: '',
        component: '',
        redirect: '',
        title: '',
        icon: 'el-icon-menu',
        hidden: true,
        sort: 0
      }
    }
  },

  mounted() {
    if (this.$route.query.hasOwnProperty('id')) {
      this.getData(this.$route.query.id)
    }
    this.getCategoryList()
  },

  methods: {
    afterUpload(list) {
      if (!list) return
      const file = list[0]
      if (file) {
        this.form.image = file.url
      }
    },
    getData(id) {
      api.info({ id: id }).then((res) => {
        this.form = res.data.info
      })
    },
    getCategoryList() {
      api.list_options({}).then(res => {
        this.category_list = res.data.list
      })
    },
    // 选择分类
    chooseTree(data) {
      console.log(data)
      this.form.parent_id = data.id
      this.form.parent_name = data.label
    },
    clearTree() {
      this.form.parent_id = 0
      this.form.parent_name = ''
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let req
          if (this.form.id > 0) {
            req = api.update(this.form)
          } else {
            req = api.create(this.form)
          }
          req.then((res) => {
            this.$message({
              type: 'success',
              message: res.msg,
              duration: 500,
              onClose: () => {
                //this.$router.go(-1)
              }
            })

          }).catch((error) => {

          })
        }
      })

    }
  }
}
</script>

<style scoped>

</style>

